<!DOCTYPE html>
<html>
    <head>
        <title>Preview Display</title>
        <meta charset="UTF-8">
        <link rel="shortcut icon" href="custom/images/favicon.ico?v=2" />
        <style>
            html, body {
                padding: 0px;
                margin: 0px;
            }
        </style>

        <script src='custom/configs/htconfig.js'></script>
        <script src='libs/ht.js'></script>

        <script>
            function init() {
                dataModel = new ht.DataModel();
                graphView = new ht.graph.GraphView(dataModel);
                graphView.addToDOM();

                ht.Default.xhrLoad('previews/display.json', function(text) {
                    var json = ht.Default.parse(text);
                    if(json.title) document.title = json.title;
                    dataModel.deserialize(json);
                    graphView.fitContent(true);
                    graphView.mi(handleClick);
                });
            }
            function handleClick(e) {
                if (e.kind === 'clickData') {
                    var data = e.data
                    if (data.getDisplayName() === 'buttonIcon') {
                        var allAIcons = [];
                        var datas = dataModel.getDatas();
                        for (var i = 0, l = datas.size(); i < l; i++) {
                            var temp = datas.get(i);
                            if (temp.getDisplayName() === 'buttonIcon') {
                                allAIcons.push(temp);
                            }
                            else {
                                var primaryColor = data.a('primaryColor') || 'rgb(255, 179, 0)';
                                var secondaryColor = data.a('secondaryColor') || 'rgb(7, 12, 43)';
                                temp.a('primaryColor', primaryColor);
                                temp.a('secondaryColor', secondaryColor);
                            }
                        }
                        for (i = 0, l = allAIcons.length; i < l; i++) {
                            allAIcons[i].a('highlight', false);
                            allAIcons[i].a('clicked', false);
                        }
                        data.a('clicked', !data.a('clicked'));
                        data.a('highlight', true);
                    }
                }
            }
        </script>
    </head>
    <body onload='setTimeout(init, 300)'>
    </body>
</html>
